<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        a {
            display: inline-block;
            text-decoration: none;
        }
        li {
            list-style: none;
        }
        .add-book-info {
            float: left;
            width: 20%;
            background-color: #e6edf5;
            padding: 10px 1%;
        }
        .book-info {
            float: left;
            width: 78%;
            background-color: #f6faf1;
            color: white;
        }
        {#设置右边#}
        .book-info .anchor-book{
            float: left;
            position: relative;
            width: 200px;
            background-color: #c6aaa0;
            padding: 5px 0;
            margin: 5px;
            border-radius: 10px;
        }
        {#设置每个作者#}
        .book-info .anchor-book .anchor {
            font-family: 楷体;
            float: left;
            padding: 2px;
            background-color: skyblue;
            border-radius: 10px 10px;
        }
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
        .book-info .anchor-book  a {
            float: right;
            width: 36px;
            height: 20px;
        }
        .del-book {
            position: absolute;
            right: 2px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 20px;
            border-radius: 10px;
        }
        .book {
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="add-book-info">
    <form method="post">
    {{ form.csrf_token() }}
    {{ form.author.label }}{{ form.author }}<br>
    {{ form.book.label }}{{ form.book }}<br>
    {{ form.submit }}<br>
    {# 显示消息闪现的内容 #}
    {% for message in get_flashed_messages() %}
        {{ message }}
    {% endfor %}
</form>
</div>

{#先遍历作者, 然后在作者里遍历书籍#}
<div class="book-info">
    {% for author in authors %}
        <div class="anchor-book">
            <div class="clearfix">
                <div class="anchor">作者: {{ author.name }}</div>
            <div>
                 <a href="{{ url_for("delete_author", author_id=author.id) }}">
                <span class="del-book">del</span>
                </a>
            </div>
            </div>
            <p style="font-size: 16px; color: green">作品: </p>
            <ul class="book">
                {% for book in author.books %}
                    <li style="display: inline-block; width: 100%; height: 20px; text-align: left; line-height: 20px; padding: 2px">
                        {{ book.name }}
                        <a href="{{ url_for("delete_book", book_id=book.id) }}">
                        <span class="del-book"> x </span>
                        </a>
                    </li>
                {% else %}
                    <li>无</li>
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
    </div>
</body>
</html>